function load()
{
    
    var sliderObj = new Slider(document.getElementById("slideGrip"), "0", "448");
}
 
 
window.addEventListener("load", load, true);

var trackedFingerCount = 0;
 

function Slider(grip, lowPosition, highPosition)
{
    this.grip = grip;
        
    this.lowPositionOnXAxis = lowPosition;
           
    this.highPositionOnXAxis = highPosition;
    
    this.midPositionOnXAxis = (highPosition/2);
        
    this.positionOnXAxis = 0;
        
    this.grip.addEventListener("touchstart", this, false);
}
 
 
Slider.prototype.handleEvent = function (event)
{
    switch(event.type)
    {
        case "touchstart" :
          this.onTouchStart(event);
          break;
        case "touchmove" :
          this.onTouchMove(event);
          break;
        case "touchend" :
          this.onTouchEnd(event);
          break;
    }
}
 
 
Slider.prototype.moveTo = function(newPositionOnXAxis)
{
	
	if (document.getElementById('subMenu').style.display == "block"){
	   
	   this.positionOnXAxis = getComponent(this.lowPositionOnXAxis, this.highPositionOnXAxis, parseInt(newPositionOnXAxis));
   }
   else{
	   
	   this.positionOnXAxis = getComponent(this.lowPositionOnXAxis, this.midPositionOnXAxis, parseInt(newPositionOnXAxis));
   }
    
   document.getElementById("page").style.webkitTransform = "translateX(" + this.positionOnXAxis + "px)";
   
   		document.getElementById("page").style.MozTransform = "translateX(" + this.positionOnXAxis + "px)";
   		
   		document.getElementById("page").style.OTransform = "translateX(" + this.positionOnXAxis + "px)";

}
 
Slider.prototype.positionToTouch = function(aTouch)
{
    var xPositionOffset = aTouch.clientX - this.touchStartPositionOnXAxis;
        
    var newPositionOnXAxis = this.positionOnXAxis + xPositionOffset;
    
    this.moveTo(newPositionOnXAxis);

    this.touchStartPositionOnXAxis = aTouch.clientX;
}
 
 
Slider.prototype.resetToTouch = function(aTouch)
{
    this.touchStartPositionOnXAxis = aTouch.clientX;
    this.positionToTouch(aTouch);
}
 
 
Slider.prototype.unregisterTouches = function()
{       
   window.removeEventListener("touchmove", this, false);
   window.removeEventListener("touchend", this, false);
   trackedFingerCount--;
}
 
 
Slider.prototype.registerTouches = function()
{           
    window.addEventListener("touchmove", this, false);
    window.addEventListener("touchend", this, false);    
}
 
 
Slider.prototype.onTouchStart = function(e)
{
    
    
    if (e.targetTouches.length != 1 && trackedFingerCount > 0)
    {
        return false;
    }
    
    e.preventDefault();
    
    this.touchStartPositionOnXAxis = e.targetTouches[0].clientX; 
    
    this.positionOnXAxis = e.targetTouches[0].clientX;
    
    this.registerTouches();
 
    trackedFingerCount++;
    
    activateMenu();
 
    return false;
}
 
 
Slider.prototype.onTouchMove = function(e)
{
    e.preventDefault();

    if (e.targetTouches.length != 1)
    {
        return false;
    }
  
    this.positionToTouch(e.targetTouches[0]);
        
    return false;
}
 
 
Slider.prototype.onTouchEnd = function(e)
{
    e.preventDefault();
    
   snapToGrid(this.positionOnXAxis);

   this.unregisterTouches();
   
   document.getElementById("page").style["-webkit-transition-duration"] = ".5s";
    
   return false;
}
 
 
function getComponent(low, high, target)
{
    if (low > target)
    {
        return low;
    }
    else if ((low <= target) && (target <= high))
    {
        return target;
    }
    else if (target > high)
    {
        return high;
    }
    return 0;
}

function activateMenu(){

	document.getElementById("page").style["-webkit-transition-duration"] = "0s";
	
	document.getElementById("mainMenu").style.display = "block";
		
	document.getElementById("mainMenu").style.zIndex = "-1";
	
	document.getElementById("subMenu").style.zIndex = "-1";
}

function snapToGrid(p){

	if (p >= 120){
		
		openMenu();
		
		this.positionOnXAxis = this.midPositionOnXAxis;
	}
	else{
		
		closeMenu();
		
		this.positionOnXAxis = this.lowPositionOnXAxis;
	}
}

function openMenu(){
	
	document.getElementById("menuButton").style.webkitTransform = "rotateZ(-90deg)";
	
		document.getElementById("menuButton").style.MozTransform = "rotateZ(-90deg)";
	
		document.getElementById("menuButton").style.OTransform = "rotateZ(-90deg)";
		
	document.getElementById("page").style.webkitTransform="translateX(224px)";
	
		document.getElementById("page").style.MozTransform="translateX(224px)";
		
		document.getElementById("page").style.OTransform="translateX(224px)";

	setTimeout(function() {
	
		document.getElementById("mainMenu").style.zIndex= "1";
		
		document.getElementById("slideGrip").style.width = "400px";
		
		document.getElementById("fadeOut").style.opacity = ".4";
		
		document.getElementById("page").style["-webkit-transition-duration"] = ".5s";
	
	}, 700);
}

function closeMenu(){
		
	document.getElementById("menuButton").style.webkitTransform = "rotateZ(0deg)";
	
		document.getElementById("menuButton").style.MozTransform = "rotateZ(0deg)";
	
		document.getElementById("menuButton").style.OTransform = "rotateZ(0deg)";
	
	document.getElementById("page").style.MozTransform="translateX(0px)";
	
		document.getElementById("page").style.webkitTransform="translateX(0px)";
	
		document.getElementById("page").style.OTransform="translateX(0px)";
	
	setTimeout(function() {
	
		document.getElementById("mainMenu").style.display= "none";
	
		document.getElementById("subMenu").style.display= "none";
	
		$(document).ready(function() {$(".subMenuButtons").css("display", "none");});
		
		document.getElementById("slideGrip").style.width = "40px";
		
		document.getElementById("fadeOut").style.opacity = "1";
				
	}, 600);
}